<template>
  <div class="met-message">
    <div class="message-list">
      <ul class="ul">
        <li v-for="(item,index) in message_list" :key="item.id" :index="index">
          <div class="time" :style="{color:app_tabBar.config.secondcolor}">{{item.addtime}}</div>
          <div class="text-message">
            <div class="avatar">
              <i-icon type="mine_fill" size="36" color="#848484" />
            </div>
            <div class="info">
              <span class="name" :style="{color:app_tabBar.config.firstcolor}">{{item.name}}</span>
              <p class="content" :style="{color:app_tabBar.config.secondcolor}">{{item.content}}</p>
            </div>

          </div>
          <div class="text-message">
            <div class="avatar">
              <i-icon type="group_fill" size="36" color="#848484" />
            </div>
            <div class="info">
              <span class="name" :style="{color:app_tabBar.config.firstcolor}">管理员</span>
              <p class="content" :style="{color:app_tabBar.config.secondcolor}">{{item.useinfo}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="message-form">
      <dynamic-form :form="message_form"></dynamic-form>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import DynamicForm from '@/components/common/DynamicForm'
export default {
  components: { DynamicForm },
  computed: {
    ...mapGetters(['message_list', 'message_form','app_tabBar'])
  },
  props: {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.met-message {
  border-top: 1px solid #dcdcdc;
  .message-list {
    ._li {
      border-bottom: 1px solid #dcdcdc;
      padding: 15px 0;
    }
    .time {
      text-align: center;
      font-size: 13px;
    }

    .text-message {
      text-align: left;
      display: flex;
      padding: 15px;
      .avatar {
        margin-right: 8px;
      }
      .name {
        font-size: 15px;
      }
      .content {
        border: 1px solid #e4eaec;
        background-color: #f3f7f9;
        padding: 10px;
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.02);
        margin-top: 8px;
        border-radius: 3px;
      }
    }
  }
  .message-form {
    padding: 15px;
  }
}
</style>
